<!-- 付款方式控件 -->
<template>
  <a-space direction="vertical" style="width: 100%">
    <div class="content">
      <a-radio-group :disabled="props.disabled" v-model="modelValue">
        <a-radio
          v-for="option in options"
          :key="option.key"
          :value="option.value"
        >
          <template v-if="option.key">{{ option.label }}</template>
          <!-- <a-input
            :disabled="props.disabled"
            v-else
            v-model="option.value"
            @input="change($event)"
          >
            <template #prepend>
              {{ option.label }}
            </template>
          </a-input> -->
        </a-radio>
      </a-radio-group>
    </div>
  </a-space>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref } from 'vue';

  const props = withDefaults(
    defineProps<{
      props: { [propName: string]: any };
      name?: string;
      required?: boolean;
      disabled?: boolean;
      oneValue: any;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );
  const options = ref([
    {
      key: 1,
      label: '预付款',
      value: '预付款',
    },
    {
      key: 2,
      label: '货到付款',
      value: '货到付款',
    },
    {
      key: 3,
      label: '分期付款',
      value: '分期付款',
    },
    {
      key: 4,
      label: '其他',
      value: '其他',
    },
  ]);
  const emit = defineEmits(['update:oneValue']);
  const modelValue = computed({
    get() {
      return props.oneValue;
    },
    set(val) {
      emit('update:oneValue', val);
    },
  });
  const change = (val: string) => {
    emit('update:oneValue', val);
  };
</script>

<style scoped lang="less">
  .content {
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.349019607843137);
    -webkit-box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.349019607843137);
    box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.34);
    padding: 20px 20px;
  }
</style>
